<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/list.css">
    <script src="./js/promiseAjax.js"></script>
    <script src="./js/cookie.js"></script>
</head>

<body>
    <div class="box top">
        <div class="title">
            <a href="./login.html">登录</a>
            <a href="./register.html">注册</a>
            
        </div>
        <div class="listtitle">列表页</div>
    </div>
    <div class="goods">
        <ul>

        </ul>
    </div>
    <div class="list">
        <!-- <span>首页</span>
        <span>上一页</span>
        <span>1</span>
        <span>2</span>
        <span>3</span>
        <span>下一页</span>
        <span>尾页</span> -->
    </div>
</body>
<script>
     var box = document.querySelector('.box')
    var title = document.querySelector('.title')
    var username = getCookie('username')
    if (username) {
        title.innerHTML = `
        <a>欢迎${username}登录!!<a/>
        <a href="javascript:;" onclick = loginout()>退出登录</a>
        `
    }
    function loginout() {
        removeCookie('username')
        title.innerHTML = `
        <a href="./login.html">登录</a>
        <a href="./register.html">注册</a>
        
        `
    }
    var goods = document.querySelector('.goods')
    var list = document.querySelector('.list')
    var ul = goods.querySelector('ul')
    var page = 1
    var pagesize = 8
    getGoods()
    function getGoods() {
        request({
            url: '/api/goods/getAllGoods/' + page + '/' + pagesize
        }).then((res) => {
            // console.log(res);
            var data = res.data.data
            //最后一页totalPage
            totalPage = res.data.totalPage
            console.log(data);
            // console.log(totalPage);
            var html = ''
            data.forEach(goods => {
                html += `
                <li>
                    <a href="detail.html?id=${goods._id}" style="display: block;width: 100%; height: 100%;">
                    <img src="${goods.img_big_logo}" alt="">
                    <p>价格:${goods.price}</p>
                    <p class="goodstitle">${goods.title}</p>
                    </a>
            </li>
            `
            });
            ul.innerHTML = html
            list.innerHTML = `
            <span onclick="firstpage()">首页</span>
            <span onclick="previouspage()">上一页</span>
            <b style="font-weight:normal;">
            `
            if (totalPage <= 5) {
                for (var a = 1; a <= totalPage; a++) {
                    list.innerHTML += `
                    <a onclick="go(${a})">${a}</a>
                `
                }
            } else {
                if (page <= 3) {
                    for (var a = 1; a <= 5; a++) {
                        list.innerHTML += `
                        <a onclick="go(${a})">${a}</a>
                    `
                    }
                } else if (page >= totalPage - 2) {
                    for (var a = totalPage - 4; a <= totalPage; a++) {
                        list.innerHTML += `
                        <a onclick="go(${a})">${a}</a>
                    `
                    }
                } else {
                    for (var a = page - 2; a <= page + 2; a++) {
                        list.innerHTML += `
                        <a onclick="go(${a})">${a}</a>
                    `
                    }
                }
            }

            list.innerHTML += `
            </b>
            <span onclick="nextpage()">下一页</span>
            <span onclick="lastpage()">尾页</span>
            `

        })

    }
    function firstpage() {
        page = 1
        if (page < 1) {
            page = 1
        }
        getGoods()
    }
    function previouspage() {
        page--
        getGoods()
    }
    function nextpage() {
        page++
        if (page === totalPage) {
            page = totalPage
        }
        getGoods()
    }
    function lastpage() {
        page = totalPage

        getGoods()
    }
    function go(a) {
        page = a
        getGoods()
    }

</script>

</html>